@import 'common.less';

.theme-dark-shared() {
    @dark-background-color: #1e1e1e;
    @dark-header-color: #2d2d30;
    @dark-text-color: #d0d0d0;
    @dark-highlight-color: #3f3f46;
    @dark-border-color: #3f3f46;
    @dark-cm-hint-active-color: #3875b2;
    @dark-cm-elevated-background-color: #333333;

    --background-color: @dark-background-color;

    --highlight-color: @dark-highlight-color;

    --border-color: @dark-border-color;
    --header-separator-color: @dark-border-color;
    --header-control-border-color: @dark-border-color;
    --header-text-color: inherit;
    --footer-color: @dark-header-color;

    --header-color: @dark-header-color;
    --error-header-color: @dark-header-color;
    --warning-header-color: @dark-header-color;
    --offline-header-color: @dark-header-color;
    --muted-header-color: @dark-header-color;

    --inspection-header-color: @dark-highlight-color;
    --inspection-border-color: @dark-border-color;
    --inspection-exception-header-color: transparent;
    --inspection-exception-border-color: @dark-border-color;
    --inspection-warning-header-color: transparent;
    --inspection-warning-border-color: @dark-border-color;

    --content-loader-color: @dark-text-color;

    color: @dark-text-color;

    .CodeMirror {
        background: inherit;
        color: inherit;
    }

    .ast button {
        // TODO: Dynamically embed SVG values during the build
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath d='M6 10h8' stroke='%23dcdcdc' fill='none'/%3E%3C/svg%3E");
    }

    .collapsed > .ast-item-wrap > button {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 0.5 20 20'%3E%3Cpath d='M6 10h8-4V6v8' stroke='%23dcdcdc' fill='none'/%3E%3C/svg%3E");
    }

    .CodeMirror-cursor {
        border-left-color: #7d7d7d;
    }

    .CodeMirror-selected {
        background: darken(@dark-cm-hint-active-color, 20%);
    }

    .CodeMirror-gutters {
        background: @dark-cm-elevated-background-color;
        border-right-color: #262626;
    }

    .CodeMirror-hints {
        background: @dark-cm-elevated-background-color;
        color: #fff;
        border-color: @dark-border-color;
    }

    .CodeMirror-hint,
    .CodeMirror-lintfix-fix {
        color: inherit;
    }

    .CodeMirror-hint-active,
    .CodeMirror-lintfix-fix-selected {
        background-color: @dark-cm-hint-active-color;
    }

    .mirrorsharp-theme {
        .cm-def, .cm-number, .cm-variable-3 { color: inherit; }
        .cm-keyword, .cm-atom { color: #569cd6; }
        .cm-builtin { color: #9cdcfe; }
        .cm-string  { color: #d69d85; }
        .cm-comment { color: #43a64a; }
        .cm-tag     { color: #696969;}
    }

    /* TODO: check why first one does not include the second */
    .mirrorsharp-any-tooltip,
    .CodeMirror-infotip,
    .CodeMirror-lintfix-popup-marker,
    .CodeMirror-lintfix-popup,
    .CodeMirror-lintfix-list {
        background-color: @dark-highlight-color;
        border-color: @dark-border-color;
    }

    .mirrorsharp-signature-selected {
        background-color: lighten(@dark-cm-elevated-background-color, 10%);
    }

    .warnings header,
    .errors header {
        border-bottom: none;
    }

    .warnings header {
        border-top: 1px solid @warning-color;
        color: @warning-color;
    }

    .errors header {
        border-top: 1px solid @error-color;
        color: @error-color;
    }

    .root-status-error .code header, .root-status-error .result header {
        border-bottom: 1px solid @error-color;
    }

    input {
        border-width: 1px;
        border-style: solid;
        background-color: transparent;
    }

    .disclaimer {
        background-color: transparent;
        color: @disclaimer-color;
    }

    .modal .disclaimer {
        padding-top: 10px;
    }

    .flow-line-end-notes {
        background-color: transparent;
        border: 1px solid var(--border-color);
    }

    .flow-line-end-exception {
        background-color: transparent;
        border: 1px solid @error-color;
        color: @error-color;
    }

    .inspection-exception header {
        color: @error-color;
        border-bottom: 1px solid @error-color;
    }

    .inspection-warning header {
        color: @warning-color;
        border-bottom: 1px solid @warning-color;
    }

    ::-webkit-scrollbar {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: @dark-text-color;
    }

    .CodeMirror-scrollbar-filler {
        background-color: transparent;
    }

    .CodeMirror-jump-arrow-start {
        fill: @dark-background-color;
    }

    .CodeMirror-jump-arrow {
        fill: #87afb0;
        stroke: #87afb0;
    }

    .CodeMirror-jump-arrow-up {
        fill: #b0879b;
        stroke: #b0879b;
    }
}

.theme-dark {
    .theme-dark-shared();
}

@media (prefers-color-scheme: dark) {
    .theme-auto {
        .theme-dark-shared();
    }
}